<template>
  <div class="center">
    <n-card
        :bordered="false"
        class="mt-4 proCard"
        size="small"
        :segmented="{ content: 'hard' }"
      >
      <div class="formClass">
        <n-form :model="formValue"  :size="size" ref="formRef" label-placement="top">
          <n-space justify="space-between">
            <n-h6 prefix="bar" type="success">协会信息</n-h6>
            <n-space>
              <n-button v-if="type"  size="small" @click="edit()">编辑</n-button>
              <n-button v-if="!type" size="small" @click="cancel()">取消</n-button>
              <n-button v-if="!type" type="success" size="small" @click="preservation()">保存</n-button>
            </n-space>
          </n-space>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi v-for="(item,index) in ItemList" :key="index" :span="item.span" :label="item.label">
              <component :is="item.type" v-model:value="formValue[item.enName]" :disabled="item.disabled" :options="item.options" :src="item.src" :size="item.size" :style="{ width:item.width }">
                <n-button v-if="item.type == 'N-upload'">上传文件</n-button>
              </component>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </div>

    </n-card>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { NConfigProvider, NCascader, NInput, NDatePicker, NSpace } from 'naive-ui';

export default defineComponent({
  components: {
    NConfigProvider,
    NInput,
    NDatePicker,
    NSpace,
  },

  setup() {
    const formRef = ref(null);
    const message = useMessage();
    const type = ref(true)
    const ItemList = ref([
      {type:'N-avatar',enName:'1',span:4,clearable: true,size: 'small',size:48,src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'},
      {label:'协会名称',type:'N-input',enName:'2',span:20,clearable: true,disabled:true,size: 'small'},
      {label:'协会名称',type:'N-input',enName:'3',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'协会法人',type:'N-input',enName:'4',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'法人联系电话',type:'N-input',enName:'5',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'联系人姓名',type:'N-input',enName:'6',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'联系人电话',type:'N-input',enName:'7',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'协会地址',type:'N-input',enName:'8',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'所属行业',type:'N-select',enName:'9',span:12,clearable: true,disabled:true,size: 'small',options:[{label:'工程车',value:1},{label:'警车',value:2}]},
      {label:'区域id',type:'N-input',enName:'10',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'社会信用代码',type:'N-input',enName:'11',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'发证机构',type:'N-input',enName:'12',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'证件有效期',type:'N-input',enName:'13',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'证件照片',type:'N-upload',enName:'14',span:12,clearable: true,disabled:true,size: 'small',size:'small',name:'点击上传'},
    ])
    const formValue = ref({})
    //编辑
    const edit = () => {
      type.value = false
       ItemList.value.map((res) => {
         return res.disabled = false
       })
    };
    //保存
    const preservation = () => {
      type.value = true
      ItemList.value.map((res) => {
        return res.disabled = true
      })
    }
    //取消
    const cancel = () => {
      type.value = true
      ItemList.value.map((res) => {
        return res.disabled = true
      })
    }
    return {
      formRef,
      edit,
      preservation,
      cancel,
      size: ref('medium'),
      ItemList,
      formValue,
      type,
      // model: ref({
      //   inputValue: null,
      //   textareaValue: null,
      //   selectValue: null,
      //   multipleSelectValue: null,
      //   datetimeValue: null,
      //   nestedValue: {
      //     path1: null,
      //     path2: null,
      //   },
      //   switchValue: false,
      //   checkboxGroupValue: null,
      //   radioGroupValue: null,
      //   radioButtonGroupValue: null,
      //   inputNumberValue: null,
      //   timePickerValue: null,
      //   sliderValue: 0,
      //   transferValue: null,
      // }),
      handleValidateButtonClick(e) {
        e.preventDefault();
        formRef.value.validate((errors) => {
          if (!errors) {
            message.success('验证成功');
          } else {
            console.log(errors);
            message.error('验证失败');
          }
        });
      },
    };
  },
});
</script>
<style lang="less" scoped>
.center :deep .n-avatar {
    position: relative;
    bottom: 15px;
}
.formClass {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
